<!--顶部条-->
<template>
  <div class="operations-container">
    <t-tooltip placement="bottom" :content="isDark ? '切换为亮色' : '切换为暗色'">
      <t-button theme="default" shape="square" variant="text" v-throttle="toggleTheme">
        <t-icon :name="isDark ? 'sunny' : 'moon'" />
      </t-button>
    </t-tooltip>
    <t-tooltip placement="bottom" content="代码仓库">
      <t-button theme="default" shape="square" variant="text" v-throttle="navToGitHub">
        <t-icon name="logo-github" />
      </t-button>
    </t-tooltip>
    <t-dropdown :min-column-width="135" trigger="click">
      <template #dropdown>
        <t-dropdown-menu>
          <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/personalCenter/personalCenter')">
            <t-icon name="user-circle"></t-icon>个人中心
          </t-dropdown-item>
          <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout('/login')">
            <t-icon name="poweroff"></t-icon>退出登录
          </t-dropdown-item>
        </t-dropdown-menu>
      </template>
      <t-button class="header-user-btn" theme="default" variant="text" v-throttle="handleUserBtn">
        <template #icon>
          <t-icon class="header-user-avatar" name="user-circle" />
        </template>
        <div class="header-user-account">{{ userName }}</div>
        <template #suffix><t-icon name="chevron-down" /></template>
      </t-button>
    </t-dropdown>
    <t-tooltip placement="bottom" content="系统设置">
      <t-button theme="default" shape="square" variant="text" v-throttle="toggleSettingPanel">
        <t-icon name="setting" />
      </t-button>
    </t-tooltip>
  </div>
  <t-drawer
    v-model:visible="showSettingDrawer"
    title="系统设置"
    size="400px"
    placement="right"
    :footer="false"
  >
    <t-divider>外观</t-divider>
    <div style="margin-bottom: 16px;">
      <div style="margin-bottom: 8px;">主题色调</div>
      <div style="display: flex; gap: 16px; margin-bottom: 16px;">
        <div
          :style="{
            width: '32px',
            height: '32px',
            borderRadius: '6px',
            background: '#fff',
            border: theme==='light' ? '2px solid #0052d9' : '2px solid #eee',
            cursor: 'pointer',
            boxShadow: '0 0 2px #ccc',
            position: 'relative'
          }"
          @click="setTheme('light')"
          title="亮色"
        >
          <t-icon v-if="theme==='light'" name="check" style="color:#0052d9;position:absolute;top:6px;left:6px;" />
        </div>
        <div
          :style="{
            width: '32px',
            height: '32px',
            borderRadius: '6px',
            background: '#222',
            border: theme==='dark' ? '2px solid #0052d9' : '2px solid #eee',
            cursor: 'pointer',
            boxShadow: '0 0 2px #ccc',
            position: 'relative'
          }"
          @click="setTheme('dark')"
          title="暗色"
        >
          <t-icon v-if="theme==='dark'" name="check" style="color:#0052d9;position:absolute;top:6px;left:6px;" />
        </div>
      </div>
      <div style="margin-bottom: 8px;">哀悼模式（用于国家公祭日或清明节）</div>
      <t-switch
        v-model="isGrayMode"
        :customValue="[true, false]"
        :label="['开启', '关闭']"
      />
    </div>
  </t-drawer>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { MessagePlugin, Drawer, Divider, Switch } from "tdesign-vue-next";
import router from "@/router/index.js";

const userName = ref('用户');
const isDark = ref(false);
const showSettingDrawer = ref(false);
const theme = ref('light');
const isGrayMode = ref(false);

function setTheme(val) {
  theme.value = val;
  document.documentElement.setAttribute('theme-mode', val);
  localStorage.setItem('themeMode', val);
  isDark.value = val === 'dark';
}

watch(isGrayMode, (val) => {
  if (val) {
    document.documentElement.classList.add('gray-mode');
    localStorage.setItem('isGrayMode', '1');
  } else {
    document.documentElement.classList.remove('gray-mode');
    localStorage.setItem('isGrayMode', '0');
  }
});

onMounted(() => {
  // 用户昵称恢复
  const userInfoStr = localStorage.getItem('userInfo');
  if (userInfoStr) {
    try {
      const userInfo = JSON.parse(userInfoStr);
      userName.value = userInfo.realName || userInfo.username || userInfo.name || userInfo.nickName || '用户';
    } catch (e) {
      userName.value = '用户';
    }
  }
  // 主题
  const savedTheme = localStorage.getItem('themeMode') || 'light';
  theme.value = savedTheme;
  document.documentElement.setAttribute('theme-mode', savedTheme);
  isDark.value = savedTheme === 'dark';
  // 哀悼模式
  const savedGray = localStorage.getItem('isGrayMode') === '1';
  isGrayMode.value = savedGray;
  if (savedGray) document.documentElement.classList.add('gray-mode');
});

/*定义跳转到代码仓库的方法*/
const navToGitHub = () => {
  window.open('https://gitee.com/wang-peiao/my-admin-system-vue');
};
/*定义跳转到个人中心的方法*/
const handleNav = (path) => {
  router.push(path);
};
/*定义退出登陆方法*/
const handleLogout = (path) => {
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  router.push(path);
};
/*定义打开设置抽屉的方法*/
const toggleSettingPanel = () => {
  showSettingDrawer.value = !showSettingDrawer.value;
};

const toggleTheme = () => {
  isDark.value = !isDark.value;
  if (isDark.value) {
    document.documentElement.setAttribute('theme-mode', 'dark');
    localStorage.setItem('themeMode', 'dark');
    MessagePlugin.success('已切换为暗色模式');
  } else {
    document.documentElement.setAttribute('theme-mode', 'light');
    localStorage.setItem('themeMode', 'light');
    MessagePlugin.success('已切换为亮色模式');
  }
};
</script>

<style scoped lang="less">
.operations-container {
  height: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 12px;

  .t-popup__reference {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .t-button {
    margin: 0 8px;
    &.header-user-btn {
      margin: 0;
    }
  }

  .t-icon {
    font-size: 20px;
    &.general {
      margin-right: 16px;
    }
  }
}

.header-operate-left {
  display: flex;
  margin-left: 20px;
  align-items: normal;
  line-height: 0;

  .collapsed-icon {
    font-size: 20px;
  }
}

.header-logo-container {
  width: 184px;
  height: 26px;
  display: flex;
  margin-left: 24px;
  color: var(--td-text-color-primary);

  .t-logo {
    width: 100%;
    height: 100%;
    &:hover {
      cursor: pointer;
    }
  }

  &:hover {
    cursor: pointer;
  }
}

.header-user-account {
  display: inline-flex;
  align-items: center;
  color: var(--td-text-color-primary);
  .t-icon {
    margin-left: 4px;
    font-size: 16px;
  }
}

:deep(.t-head-menu__inner) {
  border-bottom: 1px solid var(--td-border-level-1-color);
}

.t-menu--light {
  .header-user-account {
    color: var(--td-text-color-primary);
  }
}
.t-menu--dark {
  .t-head-menu__inner {
    border-bottom: 1px solid var(--td-gray-color-10);
  }
  .header-user-account {
    color: rgba(255, 255, 255, 0.55);
  }
  .t-button {
    --ripple-color: var(--td-gray-color-10) !important;
    &:hover {
      background: var(--td-gray-color-12) !important;
    }
  }
}

.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;

  .t-icon {
    margin-right: 8px;
  }

  :deep(.t-dropdown__item) {
    .t-dropdown__item__content {
      display: flex;
      justify-content: center;
    }
    .t-dropdown__item__content__text {
      display: flex;
      align-items: center;
      font-size: 14px;
    }
  }

  :deep(.t-dropdown__item) {
    width: 100%;
    margin-bottom: 0px;
  }
  &:last-child {
    :deep(.t-dropdown__item) {
      margin-bottom: 8px;
    }
  }
}
</style>